<template>
    <div class="map">
      <baidu-map id="map" @ready="mapReady" @click="getLocation" :scroll-wheel-zoom="true">
        <div class="search">
          <bm-auto-complete v-model="searchJingwei" :sugStyle="{zIndex: 999999}">
            <el-input size="mini" clearable v-model="searchJingwei" style="width:300px;margin-right:15px" placeholder="输入地址"></el-input>
          </bm-auto-complete>
          <el-button type="primary" size="mini" @click="getBaiduMapPoint">搜索</el-button>
        </div>
      </baidu-map>
    </div>
</template>

<script>

    export default {
      name: "index",
      props: ['pointLonLat'],
      data() {
        return {
          BMap: null,
          map: null,
          latitude: '',
          longitude: '',
          searchJingwei: '',
          marker: null,
          point: null,
        }
      },
      methods: {
        mapReady({ BMap, map }) {
          this.point = new BMap.Point(123.38333, 41.80000); // 选择一个经纬度作为中心点
          map.centerAndZoom(this.point, 11); //设置地图中心点和缩放级别
          this.BMap = BMap
          this.map = map
        },
        getLocation(e){
          this.longitude = e.point.lng
          this.latitude = e.point.lat
          if(this.marker) {
            this.map.removeOverlay(this.marker)
          }
          const point = new this.BMap.Point(this.longitude, this.latitude);
          this.marker = new this.BMap.Marker(point);
          this.map.addOverlay(this.marker);
          const geoc = new this.BMap.Geocoder();
          geoc.getLocation(point, (rs) => {
            this.$emit('clickAddress', rs)
            // this.address = `${addComp.province} ${addComp.city} ${addComp.district} ${addComp.street} ${addComp.streetNumber}`;
          });

        },
        getBaiduMapPoint(){
          let myGeo = new this.BMap.Geocoder()
          myGeo.getPoint(this.searchJingwei,(point) =>{
            if(point){
              this.map.centerAndZoom(point,15)
              this.latitude = point.lat
              this.longitude = point.lng

            }
          })
        },
      },
      watch: {
        pointLonLat: {
          handler: function (val) {
            if(this.map) {
              const point = new this.BMap.Point(val[0], val[1]);
              this.marker = new this.BMap.Marker(point);
              this.map.addOverlay(this.marker);
            }
          },
          deep: true
        }
      }
    }
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 300px;
  #map {
    width: 100%;
    height: 100%;
    position: relative;
    .search {
      position: absolute;
      top: 10px;
      left: 10px;
    }
  }
}

::v-deep {
  .anchorBL {
    display: none;
  }
}
</style>
